<template>
  <div class="wrapper">
    <en-table-layout
      toolbar
      pagination
      ref="tableLayout"
      :height="tableHeight"
      :loading="loading"
      :tableData="dataList"
      :selectionChange="selectionChange">
      <div slot="toolbar" class="inner-toolbar">
        <div class="btn-list">
          <el-button type="primary" @click="handlePrintReceipt()">打印小票</el-button>
<!--           <el-button type="primary" @click="handlePrintReceipt()">打印面单</el-button> -->
          <el-button type="primary" @click="handleSorting()">生成分拣批次</el-button>
          <el-button type="primary" @click="handleExport('SKU_SUPPLIER')">每日sku统计</el-button>
          <el-button type="primary" @click="handleExport('SKU_ORDER')">每日货找格子表</el-button>
          <el-button type="primary" @click="handleExport('ORDER_SORTING')">每日派送点找格子表</el-button>
          <el-button type="primary" @click="handleExport('ORDER_SITE')">B端配送表</el-button>
          <el-button type="primary" @click="handleOutOfStock()">确认出库</el-button>
          <el-button type="warning" @click="handleDelayDeliver()">延迟分拣</el-button>
          <el-button type="danger" @click="handleDelayDispatch()">延迟出库</el-button>
          <!-- <el-button type="text"><a href="https://egale-shop.oss-cn-hangzhou.aliyuncs.com/XP58mm%20Driver.zip">打印驱动下载</a></el-button> -->
        </div>
        <div class="topRBtn">
          <div class="receive_time">
            <el-select v-model="params.receive_time_seq" placeholder="请选择送达时间" @change="handleSortTimeChange" clearable>
              <el-option v-for="(item,index) in sortTime" :key="index" :label="item.label" :value="item.value" ></el-option>
            </el-select>
          </div>
          <div class="toolbar-search">
              <en-table-search
              @search="searchEvent"
              @advancedSearch="advancedSearchEvent"
              advanced
              advancedWidth="580"
              placeholder="请输入">
              <template slot="advanced-content">
                <el-form :model="advancedForm" label-width="90px" ref="advancedForm">
                  <el-row :gutter="10">
                    <el-col :span="24">
                      <el-form-item prop="order_sn" label="订单编号:">
                        <el-input v-model="advancedForm.order_sn" placeholder="请输入订单编号，多个订单编号用“，”分隔" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item prop="good_name" label="商品名称:">
                        <el-input v-model="advancedForm.good_name" placeholder="请输入商品名称" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="order_type" label="出库类型:">
                        <el-select v-model="advancedForm.order_type" placeholder="请选择出库类型" clearable>
                          <el-option
                          v-for="(item,index) in orderTypes"
                          :key="index"
                          :label="item.label"
                          :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item prop="print_status" label="小票打印:">
                        <el-input v-model="advancedForm.print_status" placeholder="请输入打印次数" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="delivery_status" label="出库状态:">
                        <el-select v-model="advancedForm.delivery_status" placeholder="请选择出库状态" clearable>
                          <el-option
                          v-for="(item,index) in deliveryStatus"
                          :key="index"
                          :label="item.label"
                          :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item prop="shipping_type" label="配送方式:">
                        <el-select v-model="advancedForm.shipping_type" placeholder="请选择配送方式" clearable>
                          <el-option
                            v-for="(item,index) in shippingTypes"
                            :key="index"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="site_name" label="自提站点:">
                        <el-input v-model="advancedForm.site_name" placeholder="请输入自提站点" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item prop="ship_name" label="收货人:">
                        <el-input v-model="advancedForm.ship_name" placeholder="请输入收货人姓名" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="ship_mobile" label="收货电话:">
                        <el-input v-model="advancedForm.ship_mobile" placeholder="请输入收货人电话" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item prop="sorting_batch" label="分拣批次:">
                        <el-input v-model="advancedForm.sorting_batch" type="number" placeholder="请输入分拣批次" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="sorting_seq" label="分拣序号:">
                        <el-input v-model="advancedForm.sorting_seq" type="number" placeholder="请输入出库单号" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item prop="delivery_sn" label="出库单号:">
                        <el-input v-model="advancedForm.delivery_sn" placeholder="请输入出库单号" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="delivery_date" label="出库日期:">
                        <el-date-picker
                          v-model="advancedForm.delivery_date"
                          type="date"
                          placeholder="选择日期"
                          format="yyyy 年 MM 月 dd 日"
                          value-format="yyyyMMdd">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item prop="delivery_type" label="分拣模式">
                        <el-select v-model="advancedForm.delivery_type" clearable placeholder="请选择分拣模式" class="select-type" > 
                          <el-option label="按B端分拣" value="SELF_BATCH"></el-option>
                          <el-option label="按C端分拣" value="SELF_GLOBAL"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="order_type" label="订单类型">
                        <dg-select style="width: 185px;" v-model="advancedForm.ord_type" dictType="order_type" placeholder="请选择订单类型" :defaultValue="advancedForm.ord_type" clearable></dg-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="24">
                      <el-form-item label="下单时间:">
                        <el-date-picker
                          clearable
                          v-model="advancedForm.times_range"
                          type="datetimerange"
                          align="center"
                          :editable="false"
                          unlink-panels
                          range-separator="-"
                          :default-time="['00:00:00', '23:59:59']"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </template>
            </en-table-search>
          </div>
        </div>
      </div>
      <template slot="table-columns">
        <el-table-column width="60" type="selection" />
        <!--出库信息-->
        <el-table-column  label="出库信息" min-width="200">
          <template slot-scope="{ row }">
            <div class="font-style">
              <div>单号: {{row.delivery_sn}}</div>
              <div>日期: {{row.delivery_date}}</div>
              <div>类型: {{row.wms_order_type}}</div>
              <div>状态: {{row.delivery_status | filterDeliveryStatus}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单信息" min-width="200">
          <template slot-scope="{ row }">
            <div class="font-style">
              <div>单号: {{row.order_sn}}</div>
              <div>时间: {{row.order_create_time | unixToDate('yyyy-MM-dd hh:mm:ss')}}</div>
              <div>类型: {{row.order_type | filterDict('order_type')}}</div>
              <div>状态: {{row.order_status__text}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="300" label="购买商品"   align="center" >
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.sku_list" :key="index" class="mytable">
              <div>
                <img :src="item.goods_image" class="goods-image"/>
              </div>
              <div class="goods-name">
                <a :href="`${MixinBuyerDomain}/goods/${item.goods_id}`" target="_blank" style="color: #00a2d4;">
                  <span>{{item.name}}</span>
                  <span v-for="(list,index) in item.spec_list" :key="index">,{{list.spec_value}}</span>
                  <span style="color: #d42725;" >×{{item.num}}</span>
                  <span style="color: #00a2d4;">,单价￥{{item.purchase_price}}</span>
                  <span style="color: #00a2d4;">,小计￥{{item.actual_pay_total}}</span>
                </a>
              </div>
            </div>
          </template>
        </el-table-column>
        <!--站点信息-->
        <el-table-column label="站点信息" min-width="300">
          <template slot-scope="{ row }">
            <div class="font-style">
              <div>站点: {{row.site_short_name}}</div>
              <div>姓名: {{row.site_name}}</div>
              <div>电话: {{row.site_mobile}}</div>
              <div>地址: {{row.site_addr}}</div>
            </div>
          </template>
        </el-table-column>

        <!--团长信息-->
<!--        <el-table-column prop="distributor_name" label="团长信息" min-width="200">-->
<!--          <template slot-scope="{ row }">-->
<!--            <div class="font-style">-->
<!--              <div>团长姓名: {{row.distributor_name}}</div>-->
<!--              <div>团长电话: {{row.distributor_mobile}}</div>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <!--收货人-->
        <el-table-column prop="ship_name" label="收货人" min-width="200">
          <template slot-scope="{ row }">
            <div class="font-style">
              <div>买家: {{row.ship_name}}</div>
              <div>姓名: {{row.ship_name}}</div>
              <div>电话: {{row.ship_mobile}}</div>
              <div>地址: {{row.ship_addr || '无'}}</div>
            </div>
          </template>
        </el-table-column>
        <!--其他信息-->
        <el-table-column prop="ship_name" label="其他信息" min-width="220">
          <template slot-scope="{ row }">
            <div class="font-style">
              <div v-if="row.receive_time" class="font-color">送达时间: {{ row.receive_time | unixToDate }}</div>
              <div v-else class="font-color">送达时间: 暂无送达信息</div>
              <div class="font-color">送达类型: {{ row.receive_time_type == 0 ? '次日达' : row.receive_time_type == 1 ? '当日达' : '暂无送达信息' }} </div>
              <div class="font-color">配送: {{row.shipping_type}}</div>
              <div>打印次数: {{row.print_times || 0}}</div>
            </div>
          </template>
        </el-table-column>
      </template>
      <el-pagination
        slot="pagination"
        v-if="dataList"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page="params.page_no"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data_total">
      </el-pagination>
    </en-table-layout>
    <!--出库确认-->
    <el-dialog title="出库确认" width="35%" :visible.sync="outOfStockDialog">
      <el-form
        ref="outStockForm"
        :model="outStockForm"
        :rules="outStockRulesForm"
        label-width="90px">
        <el-row>
          <el-col>
            <el-form-item prop="delivery_status" label="出库结果">
              <el-radio-group v-model="outStockForm.delivery_status" @change="handleMonitorChange(outStockForm.delivery_status)">
                <el-radio label="OUT_SUCC">出库成功</el-radio>
                <el-radio label="OUT_FAIL">出库失败</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="removeReason">
          <el-col>
            <el-form-item prop="refuse_reason" label="失败原因">
              <el-input type="textarea" v-model="outStockForm.refuse_reason" placeholder="请输入失败原因" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleOutCancel('outStockForm')">取 消</el-button>
        <el-button type="primary" @click="handleOutSubmit('outStockForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--延迟分拣-->
    <el-dialog title="延迟分拣" width="35%" :visible.sync="delayDeliverDialog">
      <el-form
        ref="delayDeliverForm"
        :model="delayDeliverForm"
        :rules="outStockRulesForm"
        label-width="90px">
        <el-form-item prop="receive_day" label="分拣时间:">
          <el-date-picker
            v-model="delayDeliverForm.receive_day"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择分拣时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="refuse_reason" label="订单号:">
          <el-tag type="success" v-for="(item,index) in delayDeliverForm.delivery_sn" :key="index">{{item}}</el-tag>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDelayDeliverCancel('delayDeliverForm')">取 消</el-button>
        <el-button type="primary" @click="handleDelayDeliverSubmit('delayDeliverForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--延迟出库-->
    <el-dialog title="延迟出库" width="35%" :visible.sync="delayDispatchDialog">
      <el-form
        ref="delayDispatchForm"
        :model="delayDispatchForm"
        label-width="90px">
        <el-form-item prop="refuse_reason" label="订单号:">
          <el-tag type="success" v-for="(item,index) in delayDispatchForm.delivery_sn" :key="index">{{item}}</el-tag>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDelayDispatchCancel('delayDispatchForm')">取 消</el-button>
        <el-button type="primary" @click="handleDelayDispatchSubmit('delayDispatchForm')">确 定</el-button>
      </div>
    </el-dialog>
      <el-dialog
        :title="'已选中'+multipleChoice.length+'个订单'"
        :visible.sync="receiptPrintDialog"
        width="300px"
        :append-to-body="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        class=""
      >
      <div style="margin-bottom: 20px;padding: 0 18px;">
        自动裁切小票：
        <el-radio v-model="autoSplitPrint" style="margin-right: 10px;" :label="0">否</el-radio>
        <el-radio v-model="autoSplitPrint" :label="1">是</el-radio>
      </div>
      <div id="mycontent" v-show="showPrint">
        <div id="advancePrint" style="padding:10px;box-sizing:border-box;">
          <div v-for="(item,index) in printOrder" :key="index">
            <div style="display: flex;justify-content: flex-end;">
              <span type="info" style="font-family: '微软雅黑';padding: 9px 15px;background: #000;color: #fff;" v-if="item.order_flag == 'FIRST_ORDER'">{{ item.order_flag | filterDict('ORDER_FLAG')}}</span>
              <span style="font-family: '微软雅黑';padding: 9px 15px;background: #000;color: #fff;" v-if="item.claims_sn">异常单</span>
            </div>
            <div style="text-align: left;font-size:14px; white-space:nowrap;font-weight: bold;padding-top:20px" v-if="item.claims_sn">理赔单号：{{item.claims_sn}}</div>
            <div style="text-align: left;font-size:14px; white-space:nowrap;font-weight: bold;" :style="{'padding-top': item.claims_sn? '0': '20px'}">订单编号：{{item.order_sn}}</div>
            <div style="text-align: left;white-space:nowrap;font-size:14px;font-weight: bold">下单时间：{{item.order_create_time | unixToDate("yyyy-MM-dd hh:mm") }}</div>
            <div v-if="item.order_seq>1" style="margin: 20px 0;border: 1px solid #000;display:flex;flex-flow: row nowrap;border-radius: 5px;overflow: hidden;font-size: 12px;">
              <div style="width:38%;background: #000;color:#fff;padding: 10px 0 10px 10px;display: flex;align-items: center;font-family: '微软雅黑';font-weight: bold;"><span>第{{item.order_seq}}单/共{{item.order_num}}单</span></div>
              <div style="width:62%;background: #fff;color:#000;padding: 10px;word-break: break-all;">格子{{item.sorting_seq_list}}</div>
            </div>
            <div style="width:100%; border-top:dashed 1px black; border-bottom:dashed 1px black; height:5px;
            margin-bottom:20px; line-height:5px; text-align: center;margin-top:20px;">
              <span style="font-weight:bold; font-size: 20px; background: #fff;z-index:999;">#{{item.sorting_batch }}_{{item.sorting_seq}}</span>
            </div>
            <div style="text-align: center;"><span>{{item.seller_name}}</span></div>
            <div style="text-align: center; font-weight: bold; font-size:20px; margin-top:10px;">{{item.cancel_reason}}</div>
              <div style="text-align:center;">
                  <barcode :value="item.claims_sn ? item.claims_sn : item.order_sn" :width="1.5" :font-size="15"  :height="40" :displayValue="false">
                    条形码显示失败
                  </barcode>
              </div>
            <div style="width:100%;display:flex;border-top:1px dashed black;border-bottom:1px dashed black;" >
              <div style="flex:2;padding:6px 0;font-weight:800;">商品名称</div>
              <div style="flex:1;padding:6px 0;font-weight:800;">数量</div>
              <div style="flex:1;padding:6px 0;font-weight:800;">单价</div>
            </div>
            <div v-for="(count,index) in item.sku_list" :key="index">
              <div style="display:flex;align-items:flex-start">
                <span style="flex:2;padding:6px;font-size:14px;">{{count.name}}</span>
                <span style="flex:1;font-weight:600;padding:6px;font-size:14px;">{{"×"+count.num}}</span>
                <span style="flex:1;padding:6px;font-size:14px;">{{count.purchase_price}}</span>
              </div>
            </div>
            <div style="width:100%; border-bottom:dashed 1px black; height:5px;
            margin-bottom:20px; margin-top:6px; text-align: center;"></div>
            <div style="margin-bottom:10px;">配送费：{{item.shipping_price}}</div>
            <div style="font-weight:bold; font-size: 20px;">合计：{{item.order_price}}</div>
            <div style="width:100%; border-bottom:dashed 1px black; height:5px;
            margin-bottom:20px; margin-top:20px; line-height:5px; text-align: center;"></div>
            <div v-if="item.site_name !== null" style="margin-bottom:10px; font-weight: bold">自提站点：{{item.site_short_name}}</div>
            <div v-if="item.site_name !== null" style="margin-bottom:10px; font-weight: bold">站长姓名：{{item.site_name}}</div>
            <div v-if="item.site_name !== null" style="margin-bottom:10px; font-weight: bold">站长电话：{{item.site_mobile}}</div>
            <div v-if="item.site_name !== null" style="margin-bottom:10px; font-weight: bold;">站点地址：{{item.site_addr}}</div>
            <div style="width:100%; border-bottom:dashed 1px black; height:5px;
            margin-bottom:20px; margin-top:20px; line-height:5px; text-align: center;"></div>
            <div style="font-weight:bold; font-size: 16px;">
              <div>
              {{item.ship_province}}{{item.ship_city}}{{item.ship_county}}{{item.ship_addr}}
              </div>
              <div>
                {{item.ship_mobile}}
              </div>
              <div>
                {{item.ship_name}}
              </div>
            </div>
            <div style="width:100%; border-bottom:dashed 1px black; height:5px;
            margin-bottom:30px; margin-top:10px; line-height:5px; text-align: center;"></div>
            <div style="text-align: left;font-size:12px; white-space:nowrap;">订单号：{{item.order_sn}}</div>
            <div style="text-align: left;white-space:nowrap;font-size:12px;margin-top:6px">下单时间：{{item.order_create_time | unixToDate("yyyy-MM-dd hh:mm") }}</div>
            <div style="width:100%; border-top:dashed 1px black; height:5px;
              padding-bottom:70px; line-height:5px; text-align: center; margin-top:20px;">
              <span style="font-weight:bold; font-size: 20px; background: #fff; padding-left:10px; padding-right:10px;  z-index: 9999;"> #{{item.sorting_batch }}_{{item.sorting_seq}}完</span>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="infooter">
          <el-button type="primary" @click="printPdf()" :loading="btn_loading">{{printText}}</el-button>
          <el-button type="primary" @click="previewOrder()">{{!showPrint?'预览':'收起'}}</el-button>
          <el-button @click="receiptPrintDialog = false">取 消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="分拣批次" 
      :visible.sync="sortingDialog"
      width="400px">
      <el-form :model="sortingForm" :rules="sortingRules" ref="sortingForm">
        <el-form-item label="订单送达时间:" prop="receive_time_seq">
          <el-select v-model="sortingForm.receive_time_seq" placeholder="请选择送达时间" clearable>
            <el-option v-for="(item,index) in sortTime" :key="index" :label="item.label" :value="item.value" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单次分拣数量:" prop="batch_size">
          <el-input-number v-model="sortingForm.batch_size"  :min="1" :max="100000" ></el-input-number>
        </el-form-item>
      </el-form>
      <div class="footer">
        <div class="infooter">
          <el-button type="primary" @click="sortingSubmit('sortingForm')">确认</el-button>
          <el-button @click="sortingDialog = false">取 消</el-button>
        </div>
      </div>
    </el-dialog>
    <div v-show="false">
      <div id="advancePrintList" style="padding:10px;box-sizing:border-box;">
        <div v-for="(item,index) in printOrderList" :key="index">
          <div style="display: flex;justify-content: flex-end;">
            <span type="info" style="font-family: '微软雅黑';padding: 9px 15px;background: #000;color: #fff;" v-if="item.order_flag == 'FIRST_ORDER'">{{ item.order_flag | filterDict('ORDER_FLAG')}}</span>
            <span style="font-family: '微软雅黑';padding: 9px 15px;background: #000;color: #fff;" v-if="item.claims_sn">异常单</span>
          </div>
          <div style="text-align: left;font-size:14px; white-space:nowrap;font-weight: bold;padding-top:20px" v-if="item.claims_sn">理赔单号：{{item.claims_sn}}</div>
          <div style="text-align: left;font-size:14px; white-space:nowrap;font-weight: bold;padding-top:20px">订单号：{{item.order_sn}}</div>
          <div style="text-align: left;white-space:nowrap;font-size:14px;font-weight: bold">下单时间：{{item.order_create_time | unixToDate("yyyy-MM-dd hh:mm") }}</div>
          <div v-if="item.order_seq>1" style="margin: 20px 0;border: 1px solid #000;display:flex;flex-flow: row nowrap;border-radius: 5px;overflow: hidden;font-size: 12px;">
            <div style="width:38%;background: #000;color:#fff;padding: 10px 0 10px 10px;display: flex;align-items: center;font-family: '微软雅黑';font-weight: bold;"><span>第{{item.order_seq}}单/共{{item.order_num}}单</span></div>
            <div style="width:62%;background: #fff;color:#000;padding: 10px;word-break: break-all;">格子{{item.sorting_seq_list}}</div>
          </div>
          <div style="width:100%; border-top:dashed 1px black; border-bottom:dashed 1px black; height:5px;
          margin-bottom:20px; line-height:5px; text-align: center;margin-top:20px;">
            <span style="font-weight:bold; font-size: 20px; background: #fff;z-index:999;">#{{item.sorting_batch }}_{{item.sorting_seq}}</span>
          </div>
          <div style="text-align: center;"><span>{{item.seller_name}}</span></div>
          <div style="text-align: center; font-weight: bold; font-size:20px; margin-top:10px;">{{item.cancel_reason}}</div>
            <div style="text-align:center;">
                <barcode :value="item.order_sn" :width="1.5" :font-size="15"  :height="40" :displayValue="false">
                  条形码显示失败
                </barcode>
            </div>
          <div style="width:100%;display:flex;border-top:1px dashed black;border-bottom:1px dashed black;" >
            <div style="flex:2;padding:6px 0;font-weight:800;">商品名称</div>
            <div style="flex:1;padding:6px 0;font-weight:800;">数量</div>
            <div style="flex:1;padding:6px 0;font-weight:800;">单价</div>
          </div>
          <div v-for="(count,index) in item.sku_list" :key="index">
            <div style="display:flex;align-items:flex-start">
              <span style="flex:2;padding:6px;font-size:14px;">{{count.name}}</span>
              <span style="flex:1;font-weight:600;padding:6px;font-size:14px;">{{"×"+count.num}}</span>
              <span style="flex:1;padding:6px;font-size:14px;">{{count.purchase_price}}</span>
            </div>
          </div>
          <div style="width:100%; border-bottom:dashed 1px black; height:5px;
          margin-bottom:20px; margin-top:6px; text-align: center;"></div>
          <div style="margin-bottom:10px;">配送费：{{item.shipping_price}}</div>
          <div style="font-weight:bold; font-size: 20px;">合计：{{item.order_price}}</div>
          <div style="width:100%; border-bottom:dashed 1px black; height:5px;
          margin-bottom:20px; margin-top:20px; line-height:5px; text-align: center;"></div>
          <div v-if="item.site_name !== null" style="margin-bottom:10px; font-weight: bold">自提站点：{{item.site_short_name}}</div>
          <div v-if="item.site_name !== null" style="margin-bottom:10px; font-weight: bold">站长姓名：{{item.site_name}}</div>
          <div v-if="item.site_name !== null" style="margin-bottom:10px; font-weight: bold">站长电话：{{item.site_mobile}}</div>
          <div v-if="item.site_name !== null" style="margin-bottom:10px; font-weight: bold;">站点地址：{{item.site_addr}}</div>
          <div style="width:100%; border-bottom:dashed 1px black; height:5px;
          margin-bottom:20px; margin-top:20px; line-height:5px; text-align: center;"></div>
          <div style="font-weight:bold; font-size: 16px;">
            <div>
            {{item.ship_province}}{{item.ship_city}}{{item.ship_county}}{{item.ship_addr}}
            </div>
            <div>
              {{item.ship_mobile}}
            </div>
            <div>
              {{item.ship_name}}
            </div>
          </div>
          <div style="width:100%; border-bottom:dashed 1px black; height:5px;
          margin-bottom:30px; margin-top:10px; line-height:5px; text-align: center;"></div>
          <div style="text-align: left;font-size:12px; white-space:nowrap;">订单号：{{item.order_sn}}</div>
          <div style="text-align: left;white-space:nowrap;font-size:12px;margin-top:6px">下单时间：{{item.order_create_time | unixToDate("yyyy-MM-dd hh:mm") }}</div>
          <div style="width:100%; border-top:dashed 1px black; height:5px;
            padding-bottom:70px; line-height:5px; text-align: center; margin-top:20px;">
            <span style="font-weight:bold; font-size: 20px; background: #fff; padding-left:10px; padding-right:10px;  z-index: 9999;"> #{{item.sorting_batch }}_{{item.sorting_seq}}完</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as API_Wms from '@/api/wms';
  import { getSortBatchList } from '@/api/order';
  import { getLodop } from '../../utils/LodopFuncs';
  import VueBarcode from 'vue-barcode';
  import dg_select from '@/components/dg-select'
  import { getDictData, filterShowDict } from '@/common/filter-show';
  const status = [{ label: '待出库', value: 'CREATED' },
    { label: '出库中', value: 'READY_OUT' },
    { label: '出库成功', value: 'OUT_SUCC' },
    { label: '出库失败', value: 'OUT_FAIL' },
    { label: '延迟出库', value: 'DELAY_OUT' },
    { label: '取消出库', value: 'CANCELLED' }];
  export default {
    name: '',
    components: {
      'barcode': VueBarcode,
      'dg-select': dg_select
    },
    data () {
      return {
        // 多选
        multipleChoice: [],
        // 表格数据
        dataList: [],
        // 分页
        params: {
          page_no: 1,
          page_size: 50,
          receive_time_seq: undefined
        },
        printText: '打印小票',
        data_total: 0,
        // 加载动画
        loading: false,
        btn_loading: false,
        sortingDialog: false,
        /** 订单打印需要的数据 */
        showPrint: false,
        printOrder: [],
        printOrderList: [],
        autoSplitPrint: 0,
        curPrintTaskIndex: 0,
        // 高级搜索表单
        advancedForm: {
          times_range: [],
          start_time: undefined,
          end_time: undefined,
          good_name: undefined,
          order_sn: undefined,
          wms_order_type: undefined,
          delivery_date: undefined,
          delivery_status: undefined,
          distributor_name: undefined,
          ship_name: undefined,
          ship_mobile: undefined,
          shipping_type: undefined,
          site_addr: undefined,
          print_times: undefined,
          delivery_sn: undefined,
          delivery_type: undefined,
          ord_type: undefined,
          sorting_seq: undefined
        },
        sortingForm: {
          batch_size: 100,
          receive_time_seq: undefined
        },
        removeReason: false,
        // 出库确认表单
        outStockForm: {
          delivery_status: 'OUT_SUCC',
          refuse_reason: undefined
        },
        // 延迟分拣确认表单
        delayDeliverForm: {
          receive_day: '',
          delivery_sn: [],
          delivery_ids: []
        },
        // 延迟出库确认表单
        delayDispatchForm: {
          delivery_sn: [],
          delivery_ids: []
        },
        // 出库确认弹框
        outOfStockDialog: false,
        delayDeliverDialog: false,
        delayDispatchDialog: false,
        receiptPrintDialog: false,
        // 分拣确认表单验证
        delayDeliverRules: {
          receive_day: [
            {
              required: true,
              message: '延迟分拣时间不能为空',
              trigger: 'blur'
            }
          ]
        },
        // 出库确认表单验证
        outStockRulesForm: {
          delivery_status: [
            {
              required: true,
              message: '出库结果不能为空',
              trigger: 'blur'
            }
          ]
        },
        // 分拣批次表单验证
        sortingRules: { 
          batch_size: [
            {
              required: true,
              message: '数值不能为空',
              trigger: 'blur'
            }
          ],
          receive_time_seq: [
            {
              required: true,
              message: '请选择配送时间',
              trigger: 'blur'
            }
          ]
        },
        // 订单类型
        orderTypes: [
          {
            label: '订单',
            value: 'ORDER'
          },
          {
            label: '理赔',
            value: 'ClAIMS'
          }
        ],
        // 出库状态
        deliveryStatus: status,
        // 配送方式
        shippingTypes: [
          {
            label: '自提',
            value: 'SELF'
          },
          {
            label: '到家',
            value: 'GLOBAL'
          }
        ],
        sortTime: []
      }
    },
    computed: {
      tableHeight (){
        return document.documentElement.clientHeight - 246 + 'px';
      }
    },
    filters: {
      // 字典显示转换
      filterDict (_stateVal, _dictType) {
        return filterShowDict(_dictType, _stateVal);
      },
      filterDeliveryStatus (msg) {
        let result = status.find((item) => {
          return item.value === msg
        })
        return result.label
      }
    },
    mounted() {
      // 获取格式化字典数据
      getDictData('ORDER_FLAG');
      getDictData('order_type');
      this.getDataList();
      this.getSortBatchList();
    },
    methods: {
      // 获取列表数据
      getDataList() {
        this.loading = true
        API_Wms.getWmsOrderList(this.params)
          .then(response => {
            this.dataList = response.data;
            this.data_total = response.data_total;
            this.loading = false;
          })
          .catch((error) => { 
            console.log(error)
            this.loading = false 
          })
      },
      getSortBatchList() {
        getSortBatchList().then(response => {
          let data = response;
          for (let i = 0; i < data.length; i++) {
            let label = data[i].sorting_time_text;
            let value = data[i].seq;
            let item = data[i];
            item['label'] = label;
            item['value'] = value;
            this.sortTime = data;
          }
        })
      },
      /** 分页大小发生改变 */
      handlePageSizeChange(size) {
        this.params.page_size = size;
        this.getDataList();
      },
      /** 分页页数发生改变 */
      handlePageCurrentChange(page) {
        this.params.page_no = page;
        this.getDataList();
      },
      /** 搜索事件触发 */
      searchEvent(data) {
        this.params = {
          ...this.params,
          keyword: data
        };
        this.params.page_no = 1;
        this.getDataList();
      },
      // 筛选配送时间
      handleSortTimeChange(val) {
        if (val) {
          this.params = {
            ...this.params,
            receive_time_seq: val
          }
        }
        this.params.page_no = 1;
        this.getDataList();
      },
      selectionChange(value) {
        this.multipleChoice = value;
      },
      /**
       * @date 2020/09/23
       * @author kaiqiang
       * @description { 高级搜索事件 }
       */
      advancedSearchEvent() {
        if (this.advancedForm.times_range && this.advancedForm.times_range.length > 0) {
          this.advancedForm.start_time = this.advancedForm.times_range[0].getTime() / 1000;
          this.advancedForm.end_time = this.advancedForm.times_range[1].getTime() / 1000;
        } else {
          this.advancedForm.start_time = undefined;
          this.advancedForm.end_time = undefined;
        }
        if (this.advancedForm.order_sn) {
          let order_sn_Obj = {
            order_sn: this.advancedForm.order_sn
          }
          this.params = {
            ...this.params,
            ...order_sn_Obj
          }
        } else {
          this.params = {
            ...this.params,
            ...this.advancedForm
          }
        }
        this.params.page_no = 1;
        this.getDataList();
      },
      // 出库确认
      handleOutOfStock() {
        for (let item of this.multipleChoice) {
          if (item.delivery_status === 'OUT_SUCC' || item.delivery_status === 'CANCELLED' || item.delivery_status === 'OUT_FAIL' ) {
            this.$message({
              type: 'error',
              message: '存在不符合出库出库规则订单!!!'
            })
            return
          }
        }
        if (this.multipleChoice.length === 0) {
          this.$message.warning('您还没有选择数据哦!!!')
          return
        } else {
          this.outOfStockDialog = true;
        }
      },
      // 延迟分拣
      handleDelayDeliver() {
        for (let item of this.multipleChoice) {
          if (item.delivery_status !== 'READY_OUT') {
            this.$message({
              type: 'error',
              message: '延迟分拣的单号状态只能是出库中!!!'
            })
            return
          }
        }
        if (this.multipleChoice.length === 0) {
          this.$message.warning('您还没有选择数据哦!!!')
          return
        } else {
          this.delayDeliverDialog = true;
          this.delayDeliverForm.delivery_ids = []
          this.delayDeliverForm.delivery_sn = []
          this.multipleChoice.forEach((item) => {
            this.delayDeliverForm.delivery_ids.push(item.delivery_id)
            this.delayDeliverForm.delivery_sn.push(item.delivery_sn)
          })
        }
      },
      // 延迟分拣取消按钮
      handleDelayDeliverCancel(delayDeliverForm) {
        this.$refs[delayDeliverForm].resetFields();
        this.delayDeliverDialog = false;
      },
      // 延迟分拣确认按钮
      handleDelayDeliverSubmit(delayDeliverForm) {
        this.delayDeliverForm.delivery_ids = this.delayDeliverForm.delivery_ids.toString()
        let params = {
          ...this.delayDeliverForm
        };
        delete params.delivery_sn
        this.$refs[delayDeliverForm].validate((valide) => {
          if (valide) {
            API_Wms.updateReceiveTime(params)
              .then(response => {
                this.delayDeliverDialog = false;
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                this.getDataList();
                this.$refs['delayDeliverForm'].resetFields();
              })
              .catch((error) => {
                console.log(error)
              })
          }
        })
      },
      // 延迟出库
      handleDelayDispatch() {
        for (let item of this.multipleChoice) {
          if (item.delivery_status !== 'READY_OUT') {
            this.$message({
              type: 'error',
              message: '延迟出库的单号状态只能是出库中!!!'
            })
            return
          }
        }
        if (this.multipleChoice.length === 0) {
          this.$message.warning('您还没有选择数据哦!!!')
          return
        } else {
          this.delayDispatchDialog = true;
          this.delayDispatchForm.delivery_ids = []
          this.delayDispatchForm.delivery_sn = []
          this.multipleChoice.forEach((item) => {
            this.delayDispatchForm.delivery_ids.push(item.delivery_id)
            this.delayDispatchForm.delivery_sn.push(item.delivery_sn)
          })
        }
      },
      // 延迟出库取消按钮
      handleDelayDispatchCancel(delayDispatchForm) {
        this.$refs[delayDispatchForm].resetFields();
        this.delayDispatchDialog = false;
      },
      // 延迟出库确认按钮
      handleDelayDispatchSubmit(delayDispatchForm) {
        this.delayDispatchForm.delivery_ids = this.delayDispatchForm.delivery_ids.toString()
        let params = {
          ...this.delayDispatchForm
        };
        delete params.delivery_sn
        this.$refs[delayDispatchForm].validate((valide) => {
          if (valide) {
            API_Wms.delayDispatch(params)
              .then(response => {
                this.delayDispatchDialog = false;
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                this.getDataList();
                this.$refs['delayDispatchForm'].resetFields();
              })
              .catch((error) => {
                console.log(error)
              })
          }
        })
      },
      // 出库确认按钮
      handleOutSubmit(outStockForm) {
        let deliverys = [];
        this.multipleChoice.forEach(item => {
          // deliverys.push(item.delivery_sn)
          deliverys.push(item.delivery_id) 
        });
        let params = {
          deliverys,
          ...this.outStockForm
        };
        this.$refs[outStockForm].validate((valide) => {
          if (valide) {
            API_Wms.putOrderOutStock(params)
              .then(response => {
                this.outOfStockDialog = false;
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                this.getDataList();
                this.$refs['outStockForm'].resetFields();
              })
              .catch((error) => {
                console.log(error)
              })
          }
        })
      },
      // 出库取消按钮
      handleOutCancel(outStockForm) {
        this.$refs[outStockForm].resetFields();
        this.removeReason = false;
        this.outOfStockDialog = false;
      },
      // 生成分拣批次
      handleSorting() {
        this.sortingDialog = true;
      },
      // 生成分拣批次确认事件
      sortingSubmit() {
        this.$refs['sortingForm'].validate((valide) => {
          if (valide) {
            API_Wms.getOrderSorting(this.sortingForm).then(response => {
              this.$message.success('操作成功!!!')
              this.sortingDialog = false;
              this.$refs['sortingForm'].resetFields();
              this.getDataList();
            }).catch((error) => {
              console.log(error)
            })
          }
        })
      },
      getSearchParams() {
        delete this.params.start_time;
        delete this.params.end_time;
        if (this.advancedForm.order_time_range) {
          this.params.start_time = this.advancedForm.order_time_range[0].getTime() / 1000
          this.params.end_time = this.advancedForm.order_time_range[1].getTime() / 1000
        }
        let _params = {
          ...this.params,
          ...this.advancedForm
        };
        delete _params.order_time_range;
        for (const _key in  _params) {
          if (_params[_key] === '') { // 当条件值为''时去除条件
            delete _params[_key];
          }
        }
        return _params;
      },
      // 分拣清单
      handleExport(_exportType) {
        let _searchParams = this.getSearchParams();
        _searchParams.export_type = _exportType;
        API_Wms.exportWmsOrder(_searchParams).then(response => {
          // 处理返回的文件流
          let blob = new Blob([response], {
            type: 'application/vnd.ms-excel;charset=utf-8'
          });
          let date = new Date().getFullYear() + '' + (new Date().getMonth() + 1) + '' + new Date().getDate();
          let name = '';
          if (_exportType === 'SKU_SUPPLIER') {
            name = '采购汇总单';
          } else if (_exportType === 'SKU_ORDER') {
            name = 'sku分拣清单';
          } else if (_exportType === 'ORDER_SORTING') {
            name = '库位站点对照';
          } else if (_exportType === 'ORDER_SITE'){
            name = '配送汇总单';
          }
          const fileName = date + name + '导出.xlsx';
          if ('download' in document.createElement('a')) {
            // 非IE下载
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
        })
      },
      // 监听radio按钮选择时间
      handleMonitorChange(value) {
        value === 'OUT_SUCC' ? this.removeReason = false : this.removeReason = true;
      },
      // 小票打印
      handlePrintReceipt() {
        for (let item of this.multipleChoice) {
          if (item.delivery_status === 'CANCELLED') {
            this.$message({
              type: 'error',
              message: '确认出库的单号状态不能是取消出库!!!'
            })
            return
          }
        }
        if (!this.multipleChoice.length) {
          this.$message.warning(`请选择订单！`);
          return;
        }
        let _parmas = [];
        this.multipleChoice.forEach(item => {
          _parmas.push(item.delivery_id);
        })
        this.receiptPrintDialog = true;
        this.btn_loading = true;
        this.printText = '加载数据中';
        API_Wms.getWmsOrderDetail(_parmas.toString()).then(response => {
          this.btn_loading = false;
          this.printText = '打印小票';
          this.printOrder = response;
        }).catch(() => { this.btn_loading = false; })
      },
      // 预览内容
      previewOrder() {
        // document.getElementById('mycontent').style.display="block";
        this.showPrint = !this.showPrint;
      },
      // 打印小票
      printPdf () {
        this.btn_loading = true;
        this.printOrderList = [];
        this.printOrderList.push(this.printOrder[this.curPrintTaskIndex]);
        setTimeout(() => {
          let LODOP = getLodop();
          LODOP.PRINT_INIT('面单打印');
          LODOP.SET_PRINT_STYLE('FontSize', 15);
          LODOP.SET_PRINT_PAGESIZE(3, 1200, 80, '');
          LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Auto-Width");
          LODOP.SET_PRINT_STYLE('Bold', 1);
          if (this.autoSplitPrint===0) {
            LODOP.ADD_PRINT_HTM(0, 0, '100', '70%', document.getElementById('advancePrint').innerHTML);
          } else {
            LODOP.ADD_PRINT_HTM(0, 0, '100', '70%', document.getElementById('advancePrintList').innerHTML);
          }
          // LODOP.PREVIEW();
          LODOP.PRINT();
          if (this.curPrintTaskIndex === this.printOrder.length-1 || this.autoSplitPrint===0) {
            this.receiptPrintDialog = false;
            this.btn_loading = false;
            this.curPrintTaskIndex = 0;
            // let _parmas = [];
            // this.multipleChoice.forEach(item => {
            //   _parmas.push(item.delivery_id);
            // });
            // let deliverys = {
            //   'delivery_ids': _parmas.toString()
            // }
            // API_Wms.getOrderPrintTimes(deliverys).then(response => {
            //   this.$message({
            //     type: 'success',
            //     message: '操作成功!'
            //   })
            // }).catch((error) => {
            //   console.log(error)
            // })
          } else {
            this.curPrintTaskIndex += 1
            this.printPdf()
          }    
        }, 1000);
      }
    }
  }
</script>

<style>
  input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
  }
</style>
<style type="text/scss" lang="scss" scoped>
  .el-date-editor {
    width: 100%;
  }
  .wrapper {

    /deep/ div.toolbar {
      height: auto;
      padding: 20px 0;
    }
    /deep/ .btn-list .el-button--small{
      margin: 5px;
    }

    /deep/ .el-table {
      padding: 10px;
      width: 100%;
      overflow-x: scroll;
      & td:not(.is-left) {
        text-align: center;
      }
    }

    .inner-toolbar {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      width: 100%;
      justify-content: space-between;
      align-items: baseline;
    }
    .topRBtn {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
    }
    .receive_time {
      margin-right: 10px;
      min-width: 140px;
    }

    /deep/ .pop-sku {
      .toolbar {
        display: none;
      }
      .el-dialog__body {
        .el-table {
          border: 1px solid #e5e5e5;
        }
      }
      .el-table__body-wrapper {
        max-height: 400px;
        overflow-y: scroll;
      }
    }

    .goods-image {
      width: 60px;
      height: 60px;
    }

    .goods-name {
      margin-left: 20px;
      top:50%;
      left: 50%;
      text-align: left;
    }

    .font-style {
      text-align: left;

      .font-color {
        color: red;
        font-size: 14px;
      }
    }

    .mytable {
      display: flex;
      color: #FD7F26;
      text-align: center;
      margin-top: 20px;
    }

    .footer {
      display: flex;
      justify-content: center;
    }
    
    .newUser{
      position: absolute;
      top: 60px;
      right: 30px;
    }
    .info {
      font-family: '微软雅黑';font-weight: bold;background: #000;color: #fff;}
  }
</style>
